<!DOCTYPE html>
{assign name="pn" value="index" }
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <title>{$sitename}</title>
    <meta name="baidu-site-verification" content="code-xEvBW4PmsD" />
    <meta name="keywords" content="{:keywords}" />
    <meta name="description" content="学海网校系统,专业的教学分享平台，助你学有所成" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="{:jquery}"></script>
    <link href="{:bootstrap_min_css}" rel="stylesheet">
    <script src="{:bootstrap_min_js}"></script>


    <link rel="stylesheet" href="http://res.itsub.cn/lib/swiper/6.8.4/swiper-bundle.min.css">
    <script src="http://res.itsub.cn/lib/swiper/6.8.4/swiper-bundle.min.js"> </script>


    <link rel="stylesheet" href="/min/?g=css&v={:version}-{$r}">
    <script src="/min/?g=js&v={:version}-{$r}"></script>
</head>
<body>

{include file="inc/header" /}

<div id="swiper" class="swiper-container" style="border:1px solid #000;width: 100%;height: 450px;">
    <div class="swiper-wrapper">
        {volist name='bannelList' id='bo'}
        <div class="swiper-slide" style="text-align: center;background-color: {$bo.bgcolor};">
            <img src="{$bo.img_url}" alt="">
        </div>
        {/volist}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
</div>

<div class="container">

    <div class="chapter">
        <h1 style="margin-bottom:20px;margin-top:40px;text-align: center">网校课程</h1>
        <div class="row course-list">
            {volist name='courseList' id='course'}
            <div class="col-lg-3 col-md-4 col-sm-6 course-wrapper" data-course-id="{$course.id}">
                <div class="course-item">
                    <div class="course-img picbox">
                        <a href="/course/{$course.id}">
                            <img src="{$course.img}" alt="" class="img-responsive">
                        </a>
                    </div>
                    <div class="course-info">
                        <div class="title" title="{$course.name}">
                            <a class="link-dark" href="/course/{$course.id}">
                                {$course.name}
                            </a>
                        </div>
                        <!--<div class="desc" title="course.desc">{{ course.name }}</div>-->
                        <div class="metas clearfix">
                            <span class="num" title="学生人数">
                                <span class="icon glyphicon glyphicon-book"></span> {$course.students_amount|default='0'}
                            </span>
                                <span class="fire" title="评论数量">
                                <span class="icon glyphicon glyphicon-comment"></span> {$course.comments_amount|default='0'}
                            </span>

                            {if $course.price eq 0 }
                            <span class="price free" title="价格">免费</span>
                            {else}
                            <span class="price" title="价格">{$course.price|default='0'}元</span>
                            {/if}

                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>


</div>

<div style="margin-top: 300px;">
    <img src="/imgs/block_picture_16.jpg" alt="" style="width:100%">
</div>
{include file="inc/footer" /}

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay:true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })

    function resizeSwiper() {
        if ($(window).width() > 1140) {
            $('#swiper').height(450);
        }else{
            $('#swiper').height($(window).width()*0.4);
        }
    }
    $(window).resize(resizeSwiper);
    resizeSwiper();

    /*
    $(function (){

    })*/
</script>
</script>
</body>
</html>
